<template>
	<view class="article-item" @click="navTo(`/pages/article/details?id=${item.id}`)">
		<view class="article-content row">
			<view class="left-text column">
				<text class="title text-ellipsis">{{item.title}}</text>
				<text class="summary text-ellipsis">{{item.summary}}</text>
			</view>
			<view class="right-image" v-if="item.imageUrl">
				<image :src="item.imageUrl" lazy-load></image>
			</view>
		</view>
		<view class="article-info">
			<text>{{item.nickName}}</text>
			<text> · {{ $util.dateFormat(item.updateDate) }}</text>
			<text> · {{item.thumhup}} 赞</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object, 
				default: ()=> ({
					id: 10,                           
					userId: 1,                        
					nickName: "武艳",                  
					title: "导效今海住先八程统周住花。",    
					summary: "百这老之处度委东平太象程线车提种中儿克又王件造使例直权集许转酸第作人下属机消且适只按员条道酸并强种统由干根即之水权标会计斗所不长口住明真北第除明等斯门权。",
					imageUrl: "https://img.alicdn.com/bao/uploaded/i2/3603079088/O1CN01rGCkfb2H0M1O7Lj45_!!0-item_pic.jpg",
					viewCount: 96320,                 
					thumhup: 98438,                   
					updateDate: new Date()        
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 文本省略样式，用于多行文本截断显示省略号 */
	.text-ellipsis {
		overflow: hidden;                    // 隐藏溢出内容
		text-overflow: ellipsis;            // 显示省略号
		-webkit-line-clamp: 2;              // 最多显示2行
		display: -webkit-box;               // 弹性盒模型
		-webkit-box-orient: vertical;       // 垂直排列
		white-space: normal;                // 正常换行
	}

	/* 文章项样式 */
	.article-item {
		padding: 30rpx;                     // 内边距
		border-bottom: 1rpx solid #f1f1f1;  // 底部边框

		/* 文章内容区域样式 */
		.article-content {
			/* 左侧文字区域样式 */
			.left-text {
				/* 文章标题样式 */
				.title {
					font-size: 35rpx;        // 字体大小
					font-weight: bold;       // 粗体
				}
				/* 文章摘要样式 */
				.summary {
					padding-top: 5rpx;       // 上内边距
					font-size: 26rpx;        // 字体大小
					color: #999;             // 文字颜色
					-webkit-line-clamp: 1;   // 最多显示1行
				}
			}

			/* 右侧图片区域样式 */
			.right-image {
				min-width: 220rpx;          // 最小宽度
				margin-left: 5rpx;          // 左外边距

				/* 图片样式 */
				image {
					width: 220rpx;           // 宽度
					height: 140rpx;          // 高度
					border-radius: 10rpx;    // 圆角
				}
			}
		}

		/* 文章信息区域样式 */
		.article-info {
			/* 文本样式 */
			text {
				font-size: 26rpx;            // 字体大小
				color: #999;                 // 文字颜色
				padding-right: 10rpx;        // 右内边距

				/* 第一个子元素样式 */
				&:first-child {
					color: #222222;           // 文字颜色
				}
			}
		}
	}
</style>
